<template>
  <el-dialog title="订单详情" :visible.sync="isShowDislog" :close-on-click-modal="false">
    <el-form :model="form" label-width="80px">
      <el-form-item label="用户昵称">
        <el-input v-model="form.nickName" readonly/>
      </el-form-item>
      <el-form-item label="用户头像">
        <img :src="form.logo" class="logo"/>
      </el-form-item>
      <el-form-item label="订单状态">
        <el-input v-model="form.statusWord" readonly/>
      </el-form-item>
      <el-form-item label="下单时间">
        <el-input v-model="form.createTime" readonly/>
      </el-form-item>
      <el-form-item label="商品列表">
         <div class="block" v-for="goods in goodsList" :key="goods.id">
             <div style="display: flex;padding-bottom:10px;">
               <el-avatar shape="square" :size="100" :src="url"></el-avatar>
               <div style="padding-left:10px;">
                  <div>{{ goods.goodsName }}</div>
                  <div style="color: red;">
                    <span>¥ {{ goods.price }}/天&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>¥ {{ goods.price }} 押金</span>
                  </div>
               </div>
             </div>
         </div>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import numeral from 'numeral'

export default {
  name: 'orderInfo',
  data () {
    return {
      isShowDislog: false,
      form: {},
      goodsList: [],
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
    }
  },
  methods: {
    showShopDetail (orderNumber) {
      this.isShowDislog = true
      this.$http.post(`http://${process.env.NODE_ENV === 'development' ? 'localhost:9009' : 'qiucc.com'}/rentmall/orderGoods/orderNumber`, {
        query: {
          orderNumber: orderNumber
        }
      }).then(res => {
        res.body.body.map(item => {
          item.deposit = numeral(item.deposit).divide(100).format('0.00')
          item.price = numeral(item.price).divide(100).format('0.00')
          item.shippingFee = numeral(item.shippingFee).divide(100).format('0.00')
        })
        this.goodsList = res.body.body
      })
    }
  },
  mounted () {},
  beforeUpdate () {
    this.form = this.$attrs.info
    if (this.form.status === 2) {
      this.form.statusWord = '待提货'
    } else if (this.form.status === 3) {
      this.form.statusWord = '待归还'
    } else {
      this.form.statusWord = '已完成'
    }
  }
}
</script>

<style lang="less">
.logo {
  width: 80px;
  height: 80px;
  background-color: #EFEFEF;
}
</style>
